<template>
	<view>
		<view class="card" v-for="item in list">
			<view class='card-header'>{{item.ptype}}</view>
			<view class="card-body">
				<view>
					<text>金额：<text :style="item.price >0 ? 'color:#409EFF' : 'color:#F56C6C'">{{item.price}}</text></text>
					<text class="yprice">余额：<text style="color:#229966">{{item.yprice}}</text></text>
				</view>
				<view>
					{{item.memo}}
				</view>
			</view>
			<view class='card-footer'>{{item.addtime}}</view>
		</view>
		<view class="load-more" v-if="loading">
			<text class="load1"></text>
			<text class="load2"></text>
			<text class="load3"></text>
		</view>
		<view class="no-more" v-if="empty">暂无更多数据</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[],
				page : 1,
				all_page : 1,
				loading:false,
				empty:false
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.loading = true;
			this.page = this.page + 1;
			if(this.page > this.all_page){
				this.loading = false;
				this.empty = true;
				return false;
			}
			this.getData();
		},
		methods:{
			getData(){
				this.ajax('user/caiwu',{
					data:{
						page : this.page
					},
					success:(res) => {
						res = res.data;
						console.log(JSON.stringify(res.info.page));
						this.all_page = Math.ceil(res.info.page.totalRows /  res.info.page.listRows);
						for(var i in res.info.list){
							this.list.push( res.info.list[i]);
						}
						this.loading = false;
					}
				})
			}
		}
	}
</script>

<style>
	.card{padding:20upx;width: calc(100% - 80upx);background: #FFFFFF;margin:20upx;border-radius: 10upx;}
	.card-header{height:50upx;line-height: 50upx;border-bottom: 1upx solid #EEEEEE;padding-bottom: 20upx;}
	.card-body{padding:20upx 0;}
	.card-footer{height:50upx;line-height: 50upx;border-top: 1upx solid #EEEEEE;font-size: 25upx;color:#666666}
	.card-body{font-size: 30upx;}
	.card-body >view{overflow: hidden;color:#666666}
	.card-body >view > text:last-child{float:right;}
	.card-body >view:last-child{margin-top:20upx;color:#333333;font-size: 35upx;}
	.load-more {text-align: center;margin-bottom: 20upx;}
	.load-more > text{display: inline-block;height: 20upx;width: 20upx;background: #409EFF;margin-left: 20upx;border-radius: 50%;transform: scale(1);transition: all 0.5s ease-in;}
	.load-more > text:first-child{margin-left: 0;}
	.load1{animation: loadings 1s infinite linear;}
	.load2{animation: loadings 1s 0.3s infinite linear;}
	.load3{animation: loadings 1s 0.6s infinite linear;}
	@keyframes loadings{
		from{transform: scale(0.7);opacity: 0.5;}
		to{transform: scale(1);opacity: 1;}
	}
	.no-more{text-align: center;font-size: 30upx;color:#666;margin: 20upx 0;}
</style>
